<template>
  <el-dialog title="申请列表" :visible.sync="dialogVisible" @close="$emit('update:visible',false)" width="60%">
    <div class="dialog_conwrap mb-20"
         v-loading="loadingSubmit"
         element-loading-text="提交中…"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)">
      <div style="margin-bottom:10px;padding-left:10px">
        申请区域：<el-select v-model="classId" placeholder="请选择" size="small" class="w-200">
        <el-option
            v-for="item in classList"
            :key="item.id"
            :label="item.class_name"
            :value="item.id">
        </el-option>
      </el-select>
      </div>
      <div class="applycartlist">
        <el-table
                ref="multipleTable"
                :data="arryList"
                :stripe="tableStripe"
                :border="tableBorder"
                tooltip-effect="dark"
                style="width: 100%"
                height="400"
                header-cell-class-name="table-text-c"
                cell-class-name="table-text-c">
          <el-table-column
                  prop="name"
                  label="教具名称"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="num"
                  label="库存"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="apply"
                  label="申请数量"
                  width="180"
                  align="center">
            <template slot-scope="scope">
              <div class="applyBtnbox">
                <span class="el-icon-remove-outline left-box btnapply" @click="reseNum(1,scope.$index)"></span>
                <span class="input-box teachinputbox">
                  <input type="number" @input="changeInput(scope.row.id,scope.$index)" v-model="scope.row.applyNumber">
                </span>
                <span class="el-icon-circle-plus-outline right-boxs btnapply" @click="reseNum(2,scope.$index)"></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  prop="read_number"
                  label="操作"
                  width="100"
                  align="center">
            <template slot-scope="scope" align="center">
              <el-button type="danger" size="small" @click="detelFn(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible=false" size="small">返回再选择</el-button>
<el-button type="primary" size="small" @click="formCheck">确认申请</el-button>
</span>
  </el-dialog>
</template>
<script>
import {mapActions, mapGetters} from "vuex";

  export default {
    name: 'Dialog',
    props: ['visible', 'eidtOption'],
    watch: {
      visible () {
        this.dialogVisible = this.visible
        if (this.visible) {
          console.log('this.eidtOption:', this.eidtOption)
          console.log('userinfo:', this.userInfo)
          // this.userInfo.public_class
          // this.userInfo.class
          let a_ = []
          if(this.userInfo.public_class.length){
            for(let item of this.userInfo.public_class){
              if(this.userInfo.class){
                if(item.id !== this.userInfo.class.id){
                  a_.push(item)
                }
              }else{
                a_.push(item)
              }
            }
          }
          if(this.userInfo.class){
            a_.push(this.userInfo.class)
          }
          this.classList = JSON.parse(JSON.stringify(a_))
          for (let i in this.eidtOption) {
            this.arryList.push(this.eidtOption[i])
          }
        } else {
          this.arryList = []
          this.loadingSubmit = false
        }
      }
    },
    computed: {
      ...mapGetters(['userInfo']),
    },
    data () {
      return {
        dialogVisible: this.visible,
        tableStripe: true, // 是否斑马栏
        tableBorder: true, // 单元格右边边框
        arryList: [],
        pickerOptions1: {
          disabledDate (time) {
            return time.getTime() < Date.now() //  - 8.64e7 减去就是不包含今天的
          }
        },
        loadingSubmit: false,
        classId: '',
        classList: [],
      }
    },
    created () {
    // this.classList()
    },
    methods: {
      formCheck () {
        if(!this.classId){
          this.$message.error('选择需要申请的区域')
          return
        }
        if(!this.loadingSubmit){
          this.loadingSubmit = true
        }
        this.$emit('submitApplyBook', this.classId)
      },
      detelFn (index) {
        this.$emit('detelBook', this.arryList[index].id)
        this.arryList.splice(index, 1)
      },
      reseNum (type, index) {
        // type 1 减，2 加
        let list = this.arryList[index]
        if (type === 1) {
          if (parseInt(list.applyNumber) > 1) {
            list.applyNumber--
          } else {
            list.applyNumber = 1
          }
        } else {
          if (parseInt(list.applyNumber) < parseInt(list.num)) {
            list.applyNumber++
          } else {
            console.log('超过了')
            this.$message.error('超出库存')
            list.applyNumber = list.num
          }
        }
        this.$set(this.arryList, index, list)
      },
      changeInput (option, index) {
        let list = this.arryList[index]
        if (parseInt(list.applyNumber) > parseInt(list.num)) {
          console.log('超过了')
          this.$message.error('超出库存')
          list.applyNumber = list.num
          this.$set(this.arryList, index, list)
        } else {
          this.$emit('changeInputBox', option)
        }
      }
    }
  }
</script>

